<template>
  <view class="content">
    <u-swiper height="300rpx" :list="swiper" indicator imgMode="aspectFit"></u-swiper>
    <view class="info-content">
      <view class="row name">
        {{ form.title }}
      </view>
      <view class="row val">{{ form.unitName || '' }}</view>
      <view class="row val">{{ form.content }}</view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import communityApi from '../request/api/community'
import config from '../request/config'
export default {
  data() {
    return {
      currentId: '',
      form: {},
      swiper: [],
    }
  },
  computed: {
    ...mapGetters('userInfo', ['user', 'isGridWorker']),
  },
  onLoad(option) {
    this.currentId = option.id
    
    this.getDetail()
  },
  // 下拉刷新
  async onPullDownRefresh() {
    await this.getDetail()
    uni.stopPullDownRefresh()
  },
  methods: {
    async getDetail() {
      uni.showLoading({
        title: '加载中',
        mask: true,
      });
      try {
        var { data } = await communityApi.getItemById(this.currentId)
      } catch (error) {
        return
      } finally {
        uni.hideLoading()
      }
      this.form = data
      this.swiper = this.form?.images?.split(",")?.map(url => config.baseUrl + url) || []
    },
  },
  onShareAppMessage() {
    return {
      title: this.form.title,
      path: `/information/detail?id=${ this.form.postId }`, // 分享路径
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;

  .info-content {
    padding: 40rpx;
    background-color: #fff;

    .row {
      margin-bottom: 10rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .name {
      font-size: 32rpx;
      font-weight: bold;
    }

    .val {
      color: #909399;
      font-size: 30rpx;
    }

    .audit {
      display: flex;
      justify-content: space-between;
      margin-top: 80rpx;

      &::v-deep .u-button {
        width: auto !important;
        height: 50rpx !important;
      }
    }

    .tag {
      border-radius: 6rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      width: 120rpx;
      color: #fff;
      margin: 15rpx 0;
      font-size: 22rpx;
    }
  }
}
</style>
